<template>
  <div>
    <el-form ref="form" :inline="true" :model="studentForm" label-width="80">
      <el-form-item label="学号">
        <el-input v-model="studentForm.stuNo"></el-input>
      </el-form-item>
      <el-form-item label="名称">
        <el-input v-model="studentForm.name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getStudent">搜索</el-button>
        <el-button type="success" @click="addVisible = true">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table style="margin 10px 0" border :data="studentData">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="username" label="学号"></el-table-column>
      <el-table-column prop="nickname" label="学生名称"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="address" label="家庭地址"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="showdialogVisible(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div style="padding: 10px 0">
      <el-pagination
        @size-change="getStudent"
        @current-change="getStudent"
        :current-page.sync="pageNum"
        :page-sizes="[2, 5, 10, 20]"
        :page-size.sync="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="修改学生信息" :visible.sync="dialogVisible" width="30%">
      <el-form :model="studentUpdate">
        <el-input type="hidden" v-model="studentUpdate.id"></el-input>
        <el-row>
          <el-col :span="10">
            <el-form-item label="学号">
              <el-input v-model="studentUpdate.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="4">
            <el-form-item label="学生姓名">
              <el-input v-model="studentUpdate.nickname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="邮箱">
              <el-input v-model="studentUpdate.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="4">
            <el-form-item label="手机号">
              <el-input v-model="studentUpdate.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="家庭地址">
          <el-input v-model="studentUpdate.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">保 存</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="新增学生信息"
      ref="addForm"
      :visible.sync="addVisible"
      @closed="close"
      width="30%"
    >
      <el-form :model="student">
        <el-row>
          <el-col :span="10">
            <el-form-item label="学号" prop="username">
              <el-input v-model="student.username"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="4">
            <el-form-item label="学生姓名" prop="nickname">
              <el-input v-model="student.nickname"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="student.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10" :push="4">
            <el-form-item label="手机号" prop="phone">
              <el-input v-model="student.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="家庭地址">
          <el-input v-model="student.adress"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addVisible = false">取 消</el-button>
        <el-button type="primary" @click="addStudent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      student: {},
      addVisible: false,
      dialogVisible: false,
      pageNum: 1,
      pageSize: 10,
      studentUpdate: {},
      studentData: [],
      studentForm: {
        stuNo: "",
        name: "",
      },
      course: [],
    };
  },
  created() {
    this.getCourse();
    this.getStudent();
  },
  methods: {
    //请求课程
    getCourse() {
      this.request.get("/course").then((res) => {
        this.course = res.data;
      });
    },
    //查询学生信息
    getStudent() {
      this.request
        .get("/user/select", {
          params: {
            stuNo: this.studentForm.stuNo,
            name: this.studentForm.name,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((resp) => {
          this.studentData = resp.data.records;
          this.total = resp.data.total;
        });
    },
    showdialogVisible(index, row) {
      this.dialogVisible = true;
      this.studentUpdate = row;
    },
    //修改提交
    submitUpdate() {
      this.request.post("/user/update", this.studentUpdate, {}).then((resp) => {
        if (resp.code == 200) {
          //修改成功
          //结束log弹窗
          this.dialogVisible = false;
          this.$message({
            type: "success",
            message: "修改成功",
          });
        } else {
          this.$message({
            showClose: true,
            message: "错了哦",
            type: "error",
          });
        }
      });
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该学生信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //发送删除请求
          this.request.delete("/user/" + row.id).then((resp) => {
            if (resp.code == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: "删除失败",
              });
            }
            this.getStudent();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //新增学生信息
    addStudent() {
      //添加提交
      this.request.post("/user/addStudent", this.student).then((resp) => {
        if (resp.code == 200) {
          //修改成功
          this.$message({
            type: "success",
            message: "添加成功",
          });
        } else {
          this.$message({
            showClose: true,
            message: "错了哦",
            type: "error",
          });
        }
        //结束log弹窗
        this.addVisible = false;
      });
    },
    close() {
      this.student = {
        username: "",
        nickname: "",
        phone: "",
        address: "",
        emial: "",
      };
      this.getStudent()
    },
  },
};
</script>

<style>
</style>